<template>
  <div class="shipping">
    <div>
      <van-nav-bar
        title="收货地址"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      >
        <template #right>
          <van-icon name="search" size="18" />
        </template>
      </van-nav-bar>
    </div>
    <div>
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        show-search-result
        :search-result="searchResult"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
      />
    </div>
  </div>
</template>
<script>
import { Toast } from 'vant'
import { areaList } from '@vant/area-data'
import { inaddress } from '../../../api/me'
export default {
  data() {
    return {
      areaList,
      searchResult: []
    }
  },
  created() {

  },
  methods: {
    async inAddress(data) {
      const res = await inaddress(data)
      if (res.data.code === 200) {
        Toast.success('添加地址成功')
      } else {
        Toast.fail('添加地址失败')
      }
    },
    onClickLeft() {
      this.$router.push({ path: '/shiptwo' })
    },
    onSave(content) {
      const data = {
        name: content.name,
        phone: content.tel,
        region: content.city + ' ' + content.province + ' ' + content.county,
        info: content.addressDetail
      }
      this.inAddress(data)
      this.$router.push({ path: '/shiptwo' })
    },
    onDelete(content) {
      content.name = ''
      content.tel = ''
      content.province = ''
      content.city = ''
      content.county = ''
      content.addressDetail = ''
      content.areaCode = ''
      content.isDefault = null
      Toast('清空完成')
    },
    onChangeDetail() {
      this.searchResult = []
    }
  }
}
</script>

<style>
</style>
